﻿var ids = [];
var cheddata = [];
var token = localStorage.getItem("token");
$(document).ready(function () {
    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        // 渲染表格的函数
        function renderTable(pageNum) {
            // 从查询框获取条件
            var productTypeName = $("#productTypeName").val();
            var ProductTypeCode = $("#ProductTypeCode").val();
            // 发送Ajax请求
            var ps = {
                ProductTypeName: productTypeName || '', // 传递查询条件
                ProductTypeCode: ProductTypeCode || '',
                PageIndex: 1,
                PageSize: 5,
                Token: token
            }
            $.ajax({
                url: '/Product/ProductTypeShowGet',  // 这里填上你的后端接口地址
                type: 'GET',
                data: ps,
                dataType: 'json',
                success: function (response) {
                    var data = JSON.parse(response);
                    console.log(data);
                    // 渲染表格
                    table.render({
                        elem: '#dataTable',
                        cols: [[
                            //多选框
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'productTypeCode', title: '产品编码' },
                            { field: 'productTypeName', title: '产品名称' },
                            { field: 'premark', title: '备注' },
                            //操作列
                            {
                                title: '操作',
                                templet: function (d) {
                                    // 添加操作按钮（如编辑、删除等）
                                    return '<button class="layui-btn layui-btn-xs" lay-on="test-page-customs" onclick="editItem(' + d.productTypeID + ')">编辑</button>' +
                                        '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteItem(' + d.productTypeID + ')">删除</button>';
                                }
                            }
                        ]],
                        data: data.data.list,  // 数据源
                        page: true,   // 启用分页
                        limit: 5,    // 每页显示多少条数据
                        limits: [5, 10, 20],  // 分页选择项
                        curr: pageNum,  // 当前页
                        total: response.totalcount,  // 总记录数
                        loading: true, // 启用加载状态
                        toolbar: '#dataTable',
                        defaultToolbar: ['exports'],
                    });
                    // 渲染分页控件
                    var totalPages = Math.ceil(response.totalcount / 10);  // 计算总页数
                    // layui.laypage.render({
                    //     elem: 'pagination',
                    //     count: response.totalcount,  // 总记录数
                    //     limit: 10,
                    //     curr: pageNum || 1,
                    //     jump: function (obj, first) {
                    //         if (!first) {
                    //             renderTable(obj.curr);  // 不为第一次调用时，重新渲染表格
                    //         }
                    //     }
                    // });
                },
                error: function (xhr, status, error) {
                    console.log('请求失败: ' + error);
                }
            });
        }

        // 查询按钮点击事件
        $('#searchBtn').click(function () {
            renderTable(1);  // 重置为第一页，并重新加载数据
        });


        // 遍历每一个多选框，若选中，则添加到列表
        table.on('checkbox(dataTableFilter)', function (obj) {
            // 获取所有勾选的行数据
            cheddata = table.checkStatus('dataTable').data;
            //获取所有勾选的行的ID
            // 提取选中数据的ID
            ids = cheddata.map(function (item) {
                //console.log(item)
                return item.productTypeID;  // 获取每一行的id
            });
            console.log(ids);
        });

        // 导出按钮点击事件
        $('#Exportgo').click(function () {
            $.ajax({
                url: 'http://10.223.8.21:8000/cpd/api/ProductRead/GetAllProductExel',  // 这里填上你的后端导出接口地址
                type: 'post',
                xhrfields: {
                    responseType: 'blob'
                },
                data: {
                    Token: token,
                    pageIndex: 1,
                    pageSize: 5
                },
                success: function (response) {
                    const bobl = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    const link = document.createElement('a');
                    lick.href = URL.createObjectURL(bobl);
                    link.download = '产品分类.xlsx';
                    document.body.appendChild(link);
                    link.click();
                    layer.msg('导出成功');
                },
                error: function (xhr, status, error) {
                    console.log('请求失败: ' + error);
                }
            });
        });




        // 批量删除按钮点击事件
        $('#BathDel').click(function () {
            if (ids.length == 0) {
                layer.msg('请先选择要删除的项', { icon: 2 });
                return;
            }
            // 询问是否删除
            layer.confirm('确定删除所选产品分类吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                //批量删除参数
                var pdb = {
                    Token: token,
                    ProductTypeID: ids.join(',')
                }
                // 发送Ajax请求
                $.ajax({
                    url: '/Product/ProductTypeDeletes',  // 这里填上你的后端接口地址
                    type: 'post',
                    data: pdb,
                    success: function (response) {
                        var data = JSON.parse(response);
                        console.log(data);
                        if (data.data == 1) {
                            layer.msg('删除成功');
                            renderTable(1);  // 重置为第一页，并重新加载数据
                        } else {
                            layer.msg('删除失败', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log('请求失败: ' + error);
                    }
                });
            }, function () {
                layer.msg('已取消', {
                    time: 20000, //20s后自动关闭
                    btn: ['确定']
                });
            });

        });

        // 初次加载表格数据
        renderTable(1);
        var datasfan = {}
        // //////////////////////////////////////////////编辑 // //////////////////////////////////////////////
        window.editItem = function (productTypeID) {
            var $ = layui.$;
            var layer = layui.layer;
            var util = layui.util;
            var form = layui.form;
            util.on('lay-on', {
                'test-page-customs': function () {
                    layer.open({
                        type: 1,
                        area: '550px',
                        resize: false,
                        shadeClose: true,
                        title: '产品分类编辑',
                        content: `
                                                                                                                                                                                                                  <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                                                                                                                                                                                            <div class="demo-login-container">
                                                                                                                                                                                                                      <div class="layui-form-item">
                                                                                                                                                                                                    <div class="layui-inline">
                                                                                                                                                                                                      <label class="layui-form-label">产品编码</label>
                                                                                                                                                                                                      <div class="layui-input-block">
                                                                                                                                                                                                                <input type="text" name="productTypeCode" id="date1" autocomplete="off" class="layui-input">
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                            <div class="layui-form-item">
                                                                                                                                                                                                            <div class="layui-inline">
                                                                                                                                                                                                              <label class="layui-form-label">产品名称</label>
                                                                                                                                                                                                              <div class="layui-input-block">
                                                                                                                                                                                                                        <input type="text" name="productTypeName" id="date1" autocomplete="off" class="layui-input">
                                                                                                                                                                                                              </div>
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                       <div class="layui-form-item">
                                                                                                                                                                                                    <label class="layui-form-label">上级类别</label>
                                                                                                                                                                                                    <div class="layui-input-inline">
                                                                                                                                                                                                            <select id="dynamicselect" name="parentId" lay-filter="aihao">

                                                                                                                                                                                                    </select>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                  </div>
                                                                                                                                                                                                          <div class="layui-form-item">
                                                                                                                                                                                                            <div class="layui-inline">
                                                                                                                                                                                                              <label class="layui-form-label">备注</label>
                                                                                                                                                                                                              <div class="layui-input-block">
                                                                                                                                                                                                                        <input type="text" name="premark" id="date1" autocomplete="off" class="layui-input">
                                                                                                                                                                                                              </div>
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                              <div class="layui-form-item">
                                                                                                                                                                                                                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">修改</button>
                                                                                                                                                                                                              </div>
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                          </div>
                                                                                                                                                                                                        `,
                        success: function () {
                            $.ajax({
                                url: '/Product/ProductTypeSelect',  // 获取下拉框
                                type: 'get',
                                data: {
                                    model: token
                                },
                                success: function (res) {
                                    response = JSON.parse(res);
                                    var resdata = response.data;
                                    var selectdata = '<option value="0">顶级</option>';
                                    resdata.forEach(function (item) {
                                        selectdata += '<option value="' + item.productTypeID + '">' + item.productTypeName + '</option>';
                                    });
                                    $('#dynamicselect').html(selectdata);
                                    form.render('select');
                                    //反填参数
                                    var pts = {
                                        Token: token,
                                        Id: productTypeID
                                    }
                                    $.ajax({
                                        url: '/Product/ProductTypeSet',  // 反填
                                        type: 'get',
                                        data: pts,
                                        success: function (res) {
                                            response = JSON.parse(res);
                                            var resdata = response.data;
                                            datasfan = {
                                                productTypeCode: resdata.productTypeCode,
                                                productTypeName: resdata.productTypeName,
                                                parentId: resdata.parentId,
                                                premark: resdata.premark,
                                                productTypeID: resdata.productTypeID,
                                                createTime: resdata.createTime,
                                                addTime: resdata.addTime,
                                                addName: resdata.addName
                                            }
                                            form.val('filter-test-layer', {
                                                "productTypeCode": resdata.productTypeCode,
                                                "productTypeName": resdata.productTypeName,
                                                "parentId": resdata.parentId,
                                                "premark": resdata.premark,
                                                createTime: resdata.createTime,
                                                addTime: resdata.addTime,
                                                addName: resdata.addName
                                            });
                                        },
                                        error: function (xhr, status, error) {
                                            console.log('请求失败: ' + error);
                                        }
                                    });
                                },
                                error: function (xhr, status, error) {
                                    console.log('请求失败: ' + error);
                                }
                            });

                        }
                    });
                }
            });

            // 对弹层中的表单进行初始化渲染
            form.render();
            // 表单提交事件
            form.on('submit(demo-login)', function (data) {
                var field = data.field; // 获取表单字段值
                var fioesdata = {
                    "productTypeID": datasfan.productTypeID,
                    "productTypeCode": field.productTypeCode,
                    "productTypeName": field.productTypeName,
                    "parentId": field.parentId,
                    "premark": field.premark,
                    "createTime": datasfan.createTime,
                    "addName": datasfan.addName,
                    "addTime": datasfan.addTime,
                    "office_Id": "string"
                }
                field = JSON.stringify(fioesdata);
                //修改参数
                var ptd = {
                    Token: token,
                    products: field
                }
                $.ajax({
                    url: '/Product/ProductTypeUpd',  // 这里填上你的后端接口地址
                    type: 'post',
                    data: ptd,
                    success: function (response) {
                        var data = JSON.parse(response);
                        if (data.data == 1) {
                            layer.msg('修改成功', { icon: 0 }, function () {
                                location.reload()
                            });
                        } else {
                            layer.msg('修改失败', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log('请求失败: ' + error);
                    }
                });
                // …
                return false; // 阻止默认 form 跳转
            });
        };

        // // ////////////////////////////////////////////// 删除作 // //////////////////////////////////////////////
        window.deleteItem = function (productTypeID) {
            // 询问是否删除
            layer.confirm('确定删除该产品分类吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                var pd = {
                    Token: token,
                    ProductTypeID: productTypeID
                }
                // 发送Ajax请求
                $.ajax({
                    url: '/Product/ProductTypeDelete',  // 这里填上你的后端接口地址
                    type: 'post',
                    data: pd,
                    success: function (response) {
                        var data = JSON.parse(response);
                        if (data.data == 1) {
                            layer.msg('删除成功');
                            renderTable(1);  // 重置为第一页，并重新加载数据
                        } else {
                            layer.msg('删除失败', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log('请求失败: ' + error);
                    }
                });
            }, function () {
                layer.msg('已取消', {
                    time: 20000, //20s后自动关闭
                    btn: ['确定']
                });
            });

        };
    });

    ////////////////////////////////////////////添加/////////////////////////////////////
    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        // 事件
        util.on('lay-on', {
            'test-page-custom': function () {
                layer.open({
                    type: 1,
                    area: '550px',
                    resize: false,
                    shadeClose: true,
                    title: '产品分类新增',
                    content: `
                                                                                                                                                                                                  <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                                                                                                                                                                                    <div class="demo-login-container">
                                                                                                                                                                                                              <div class="layui-form-item">
                                                                                                                                                                                            <div class="layui-inline">
                                                                                                                                                                                              <label class="layui-form-label">产品编码</label>
                                                                                                                                                                                              <div class="layui-input-block">
                                                                                                                                                                                                        <input type="text" name="productTypeCode" id="numbercode" autocomplete="off" class="layui-input">
                                                                                                                                                                                              </div>
                                                                                                                                                                                            </div>
                                                                                                                                                                                                    <div class="layui-form-item">
                                                                                                                                                                                                    <div class="layui-inline">
                                                                                                                                                                                                      <label class="layui-form-label">产品名称</label>
                                                                                                                                                                                                      <div class="layui-input-block">
                                                                                                                                                                                                                <input type="text" name="productTypeName" id="date1" autocomplete="off" class="layui-input">
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                               <div class="layui-form-item">
                                                                                                                                                                                            <label class="layui-form-label">上级类别</label>
                                                                                                                                                                                            <div class="layui-input-inline">
                                                                                                                                                                                                    <select id="dynamicselect" name="parentId" lay-filter="aihao">

                                                                                                                                                                                            </select>
                                                                                                                                                                                            </div>
                                                                                                                                                                                          </div>
                                                                                                                                                                                                  <div class="layui-form-item">
                                                                                                                                                                                                    <div class="layui-inline">
                                                                                                                                                                                                      <label class="layui-form-label">备注</label>
                                                                                                                                                                                                      <div class="layui-input-block">
                                                                                                                                                                                                                <input type="text" name="premark" id="date1" autocomplete="off" class="layui-input">
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                      <div class="layui-form-item">
                                                                                                                                                                                                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">添加</button>
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                  </div>
                                                                                                                                                                                                `,
                    success: function () {
                        //生成唯一六位数并为产品编码赋值
                        var code = Math.floor(Math.random() * 1000000) + 100000;
                        $('#numbercode').val(code);
                        //获取下拉框数据
                        $.ajax({
                            url: '/Product/ProductTypeSelect',  // 这里填上你的后端接口地址
                            type: 'get',
                            data: {
                                model: token
                            },
                            success: function (res) {
                                response = JSON.parse(res);
                                var resdata = response.data;
                                var selectdata = '<option value=""></option><option value="0">顶级</option>';
                                resdata.forEach(function (item) {
                                    selectdata += '<option value="' + item.productTypeID + '">' + item.productTypeName + '</option>';
                                });
                                $('#dynamicselect').html(selectdata);
                                form.render('select');
                            },
                            error: function (xhr, status, error) {
                                console.log('请求失败: ' + error);
                            }
                        });
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(demo-login)', function (data) {
                            var field = data.field; // 获取表单字段值
                            var datas = {
                                "productTypeCode": field.productTypeCode,
                                "productTypeName": field.productTypeName,
                                "parentId": field.parentId,
                                "premark": field.premark,
                                "createTime": "2024-11-26T11:56:37.731Z",
                                "addName": "string",
                                "addTime": "2024-11-26T11:56:37.731Z",
                                "office_Id": "string"
                            }
                            datas = JSON.stringify(datas);
                            //添加参数
                            var ptc = {
                                Token: token,
                                products: datas
                            }
                            // 此处可执行 Ajax 等操作
                            $.ajax({
                                url: '/Product/ProductTypeAdd',  // 这里填上你的后端接口地址
                                type: 'post',
                                data: ptc,
                                success: function (response) {
                                    var data = JSON.parse(response);
                                    if (data.data == 1) {
                                        layer.msg('添加成功', { icon: 0 }, function () {
                                            location.reload()
                                        });
                                    } else if (data.data == -1) {
                                        layer.msg('添加产品分类重复了，请重试', { icon: 2 });
                                    }
                                },
                                error: function (xhr, status, error) {
                                    console.log('请求失败: ' + error);
                                }
                            });
                            // …
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
            }
        })
    });

});
